<template>
  <view class="system-user">
    <u--input v-model="username" :placeholder="placeholder" suffix-icon="search" readonly @click="fetch"/>
    <u-popup :show="show" round @close="close">
      <view style="height: 80vh">
        <u-search
          v-model="search" shape="round" placeholder="请输入搜索关键词" right-icon="search" show-action
          @search="onSearch"/>
        <u-list @scrolltolower="getMemberList">
          <u-list-item v-for="(item, index) in memberList" :key="index" class="usercell">
            <u-cell @click="select(item)">
              <template #icon>
                <u-avatar shape="square" size="80" :src="item.portrait" custom-style="margin: -3px 5px -3px 0;"/>
              </template>
              <template #title>
                <view class="u-slot-title">
                  <text class="u-cell-text" style="font-size: 18px; font-weight: bold;">{{ item.realname }}</text>
                </view>
              </template>
              <template #label>
                <view class="u-slot-title slot-title">
                  <u-icon name="bookmark" color="#9a9a9a"/>
                  <text class="u-cell-text">{{ item.organization.label }}</text>
                </view>
              </template>
              <template #value>
                <view class="u-slot-title slot-title">
                  <u-icon name="phone-fill" color="#333333"/>
                  <text class="u-cell-text" style="color: #333333;">{{ item.phone }}</text>
                </view>
              </template>
            </u-cell>
          </u-list-item>
        </u-list>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { fetchUserList, getUser } from '@/api/system/user'
import { objectMerge } from '@/utils'
import phone from '@/static/iphone.png'
import departmentIcon from '@/static/department.png'
import positionIcon from '@/static/position.png'

export default {
  name: 'SystemUser',
  props: {
    modelValue: {
      type: String,
      default: undefined
    },
    placeholder: {
      type: String,
      default: '请选择用户'
    },
    label: {
      type: String,
      default: '用户选择'
    },
    width: {
      type: String,
      default: '100%'
    },
    query: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      show: false,
      username: undefined,
      Phoneicon: phone,
      department: departmentIcon,
      position: positionIcon,
      search: '', // 搜索框内输入的值
      memberList: [], // 获取的列表
      loading: false,
      finished: false,
      refreshing: false,
      listQuery: {
        page: 1,
        limit: 20,
        search: ''
      }
    }
  },
  onShow() {
    this.getMemberList()
  },
  watch: {
    modelValue: {
      immediate: true,
      handler() {
        this.getUserInfo()
      }
    }
  },

  methods: {
    getUserInfo() {
      this.username = undefined
      if (this.isNull(this.modelValue)) {
        return
      }
      getUser(this.modelValue).then(response => {
        if (response.data.success) {
          this.username = response.data.data.realname
        }
      })
    },
    close() {
      this.show = false
    },
    fetch() {
      this.show = true
      // this.memberList = []
      this.getMemberList()
    },
    select(row) {
      this.$emit('update:modelValue', row.id)
      this.username = row.realname
      this.show = false
    },
    onSearch(val) {
      this.listQuery.page = 1
      this.listQuery.search = val
      this.getMemberList()
    },
    getMemberList() {
      this.listQuery = objectMerge(this.listQuery, this.query)
      fetchUserList(this.listQuery).then((res) => {
        if (res.data.success) {
          this.memberList.push(...res.data.data)
          this.listQuery.page++
          this.finished = res.data.data.length < this.listQuery.limit
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.system-user {
  width: 100%;

  :deep(.u-popup__content) {
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
  }

  :deep(.usercell) {
    margin-bottom: 15px !important;
  }

  :deep(.u-search) {
    padding: 10px;
    box-sizing: border-box;
  }

  .u-slot-title {
    display: flex;
    align-items: center;
    margin-top: 8px;
  }

  :deep(.u-input) {
    height: 38px;
    padding: 0 !important;
    padding-left: 9px !important;
    overflow: hidden;
  }

  :deep(.u-input__content) {
    width: 100% !important;
    height: 100% !important;
  }

  :deep(.u-input__content__subfix-icon) {
    background-color: $u-primary;
    color: #fff !important;
    width: 38px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :deep(.u-icon__icon) {
    color: #fff !important;
  }

  :deep(.uicon-bookmark) {
    color: #9a9a9a !important;
  }

  .popup-content {
    height: 480px;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;

    :deep(.u-input__content__subfix-icon) {
      border-top-right-radius: 30px;
      border-bottom-right-radius: 30px;
      width: 57px !important;
    }

    :deep(.u-input) {
      border-radius: 30px;
    }

    :deep(.u-avatar__image),
    :deep(.u-avatar) {
      width: 70px !important;
      height: 70px !important;
      border-radius: 50% !important;
    }
  }

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px !important;
    width: 100%;

    .close {
      margin-left: 15px;
      display: flex;
      justify-content: center;
      font-size: 24px;
      color: #daddde;
    }
  }

  :deep(.u-safe-bottom) {
    padding: 0 !important;
  }
}
</style>
